import React, { useState } from 'react';
import { List, Tag, Space, Button, Badge, Checkbox } from 'antd';
import { CheckOutlined, DeleteOutlined } from '@ant-design/icons';
import styles from './MessageList.module.less';
import dayjs from 'dayjs';

interface MessageListProps {
  type: string;
  searchText: string;
  readStatus: string;
  dateRange: [dayjs.Dayjs, dayjs.Dayjs] | null;
  onBatchRead?: (ids: string[]) => void;
  onBatchDelete?: (ids: string[]) => void;
}

type MessageType = 'verification' | 'correction' | 'system';

const MessageList: React.FC<MessageListProps> = ({
  type,
  searchText,
  readStatus,
  dateRange,
  onBatchRead,
  onBatchDelete
}) => {
  const [selectedIds, setSelectedIds] = useState<string[]>([]);

  const messages = [
    {
      id: '1',
      title: '您的项目已通过预验收审核',
      content: '恭喜您的项目通过预验收审核，请及时查看验收意见...',
      type: 'verification',
      subType: 'pre',
      time: '2024-03-15 10:30',
      read: false,
      hasAttachment: true
    },
    // ... 更多消息数据
  ];

  const handleSelectAll = (checked: boolean) => {
    setSelectedIds(checked ? messages.map(item => item.id) : []);
  };

  const handleSelect = (id: string, checked: boolean) => {
    setSelectedIds(prev => 
      checked ? [...prev, id] : prev.filter(item => item !== id)
    );
  };

  const getTagColor = (msgType: string): string => {
    const colors: Record<MessageType, string> = {
      verification: 'blue',
      correction: 'orange',
      system: 'default'
    };
    return colors[msgType as MessageType] || 'default';
  };

  return (
    <div className={styles.messageListWrapper}>
      <div className={styles.listHeader}>
        <Checkbox
          indeterminate={selectedIds.length > 0 && selectedIds.length < messages.length}
          checked={selectedIds.length === messages.length}
          onChange={e => handleSelectAll(e.target.checked)}
        >
          全选
        </Checkbox>
        <Space>
          <span className={styles.selectedCount}>
            已选择 {selectedIds.length} 项
          </span>
          {selectedIds.length > 0 && (
            <>
              <Button 
                type="link" 
                icon={<CheckOutlined />}
                onClick={() => onBatchRead?.(selectedIds)}
              >
                标记已读
              </Button>
              <Button
                type="link"
                danger
                icon={<DeleteOutlined />}
                onClick={() => onBatchDelete?.(selectedIds)}
              >
                删除
              </Button>
            </>
          )}
        </Space>
      </div>

      <List
        className={styles.messageList}
        itemLayout="horizontal"
        dataSource={messages}
        renderItem={item => (
          <List.Item
            className={selectedIds.includes(item.id) ? styles.selected : ''}
          >
            <div className={styles.checkboxWrapper}>
              <Checkbox
                checked={selectedIds.includes(item.id)}
                onChange={e => handleSelect(item.id, e.target.checked)}
              />
            </div>
            <List.Item.Meta
              avatar={
                <Badge dot={!item.read}>
                  <div className={styles.messageIcon} />
                </Badge>
              }
              title={
                <Space>
                  <span className={styles.title}>{item.title}</span>
                  <Tag color={getTagColor(item.type)}>{item.subType}</Tag>
                </Space>
              }
              description={
                <div className={styles.messageContent}>
                  <p>{item.content}</p>
                  <span className={styles.time}>{item.time}</span>
                </div>
              }
            />
          </List.Item>
        )}
      />
    </div>
  );
};

export default MessageList; 